import React, { Component } from 'react'
import Footer from '../../components/footer'
import './changePswd.scss'
import { NavLink } from 'react-router-dom'
// import { getBanners } from './../../api'

// 超值拼团
class Com extends Component {
    constructor(props) {
        super(props)
        this.state = {
            proList: [1, 2]
        }
    }
    render() {
        // const { proList } = this.state
        return (
            <div className="container">
                <div className="box">
                    <div className="changePswd_content">
                        <header>
                            <NavLink to="/users">
                                <img src="/images/user/personalSet/jiantou.png" alt="" />
                            </NavLink>
                            <p>超值拼团</p>
                        </header>
                        <div className="scroll_box">
                            <div className="group">
                                <div id="items" >
                                    <img src="/images/user/changeSkin/new year.png" alt="" />
                                    <div>
                                        <span><img src="/images/user/order/tuan.png" alt="" /></span>
                                        山东聊城玉茹 网红甜瓜 汁多爽口 香甜鲜嫩 5斤装32元拼团包邮
                                        <div> <p><span>￥</span> 32 </p> <img src="/images/user/order/juxing.png" alt="" /></div>
                                    </div>
                                </div>
                                <div id="items" >
                                    <img src="/images/user/changeSkin/new year.png" alt="" />
                                    <div>
                                        <span><img src="/images/user/order/tuan.png" alt="" /></span>
                                        山东聊城玉茹 网红甜瓜 汁多爽口 香甜鲜嫩 5斤装32元拼团包邮瓜 汁多爽口 香甜鲜嫩 5斤装32元拼团包邮山东聊城玉茹 网红甜瓜 汁多爽口 香甜鲜嫩
                                        <div> <p><span>￥</span> 32 </p> <img src="/images/user/order/juxing.png" alt="" /></div>
                                    </div>                                </div>
                                <div id="items" >
                                    <img src="/images/user/changeSkin/new year.png" alt="" />
                                    <div>
                                        <span><img src="/images/user/order/tuan.png" alt="" /></span>
                                        山东聊城玉茹 山东聊城玉茹 网红甜瓜 汁多爽口 香甜鲜嫩 5斤装32元拼团包邮 汁多爽口 香甜鲜嫩 5斤装32元拼团包邮
                                        <div> <p><span>￥</span> 32 </p> <img src="/images/user/order/juxing.png" alt="" /></div>
                                    </div>                                </div>
                                <div id="items" >
                                    <img src="/images/user/changeSkin/new year.png" alt="" />
                                    <div>
                                        <span><img src="/images/user/order/tuan.png" alt="" /></span>
                                        山东聊城玉茹 网红甜 5斤装32元拼团包邮山东聊城玉茹 网红甜瓜 汁多爽口 香甜鲜嫩 5斤装32元拼团包邮
                                        <div> <p><span>￥</span> 32 </p> <img src="/images/user/order/juxing.png" alt="" /></div>
                                    </div>                                </div>
                                {/* {
                                    proList.map((item,index)=>{
                                       return (
                                            <div key={index} id="items" >
                                                <img src="/images/user/changeSkin/new year.png" alt="" />
                                                <div>山东聊城玉茹 网红甜瓜 汁多爽口 香甜鲜嫩 5斤装32元拼团包邮</div>
                                            </div>
                                        )
                                    })
                                } */}
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }

    componentDidMount() {
        // getBanners().then(res => {
        //     this.setState({
        //       proList: res.data.data.slideshow
        //     })
        //     this.waterfall()
        // })
        this.waterfall()
    }

    waterfall() {
        let list = Array.from(document.querySelectorAll('#items'))
        let box = document.querySelector('.collAge')
        let width = 1.68
        let gap = 0.08
        let height = []  //记录每列的高度
        box.style.width = 2 * (width + gap) - gap + 'rem'
        for (let i = 0; i < list.length; i++) {
            if (i < 2) {
                list[i].style.left = (width + gap) * i + 'rem'
                height[i] = (list[i].offsetHeight / 100) + gap
            } else {
                let minHeight = 0   //最短列的下标
                for (let j = 1; j < 2; j++) {
                    if (height[minHeight] > height[j]) {
                        minHeight = j
                    }
                }
                list[i].style.left = (width + gap) * minHeight + 'rem'
                list[i].style.top = height[minHeight] + 'rem'
                height[minHeight] += list[i].offsetHeight + gap
            }
            console.log(height)
        }
    }
}

export default Com